<template>
    <div>
        <el-row>
         
                <el-col :span="3">
                        <!--显示左侧菜单--> 
                        <!--组件传参 把菜单数组传过去-->
                        <Sub :menuList="lyst.ly"></Sub>
                </el-col>
       

        <el-col :span="21">
                <div>
                        <el-row>
                          <el-col :span="21"></el-col>
                          <el-col :span="3">
                                <!--显示用户信息-->
                                当前登录人:{{ lgStore.name }}
                                <el-button type="primary" @click="logout">退出登录</el-button>
                          </el-col>
                        </el-row>
                       
                </div>
                <div>
                        <!--显示菜单点击后的内容-->
                        <router-view></router-view>
                </div>
        </el-col>

       
   </el-row>
    </div>    

   
  </template>
  
  <script lang="ts" setup>
  import Sub from '@/views/sub/index.vue'
  //引入小仓库
  import luYouStore from '@/store/modules/luyou';
  import { onMounted } from 'vue';
  //引入路由
  import {useRouter} from 'vue-router'
  //引入登录小仓库
  import loginStore from '../../store/modules/login.ts';

  //获取路由器
  let router=useRouter();

  //使用小仓库
  let lyst=luYouStore()

  
  //拿到登录仓库对象
  let lgStore=loginStore();

  //生命周期挂载
  onMounted(()=>{
        //初始化菜单
        lyst.useMyMenuList();
        //获取用户信息
        lgStore.userInfo();
      
  })

  
//退出登录
let logout=()=>{
   loginStore().userLogout()
   //退出后跳转到登录界面
   router.push('/login')
}

  </script>

  <style scoped>

  </style>
  